---
id: 613e275749ebd008e74bb62e
title: 步驟 8
challengeType: 0
dashedName: step-8
---

# --description--

_SVG_（可縮放矢量圖形）的一個有用之處是它包含一個 `path` 屬性，該屬性允許在不影響圖像分辨率的情況下縮放圖像。

`img` 當前是默認尺寸，這個尺寸太大。 CSS提供了一個 `max` 函數，它返回一組由逗號分隔的值中最大的值。 例如：

```css
img {
  width: max(250px, 25vw);
}
```

In the above example, the width of the image will be 250px if the viewport width is less than 1000 pixels. If the viewport width is greater than 1000 pixels, the width of the image will be 25vw. This is because 25vw is equal to 25% of the viewport width.

使用圖像的 `id` 作爲選擇器，並將其 `width` 設置爲 `100px` 或 `18vw` 中的最大值，以對圖像進行縮放。

# --hints--

您應該使用 `#logo` 選擇器來定位 `img` 元素。

```js
assert.exists(new __helpers.CSSHelp(document).getStyle('#logo'));
```

你應該將 `img` 的 `width` 設置爲 `max(100px, 18vw)`。

```js
assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.width, 'max(100px, 18vw)');
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
    <title>Accessibility Quiz</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
      <h1>HTML/CSS Quiz</h1>
      <nav></nav>
    </header>
    <main></main>
  </body>
</html>

```

```css
body {
  background: #f5f6f7;
  color: #1b1b32;
  font-family: Helvetica;
  margin: 0;
}

--fcc-editable-region--

--fcc-editable-region--

```
